<template>
  <HerinContainer
    class="MainCoal-box"
    :delay="1"
    direction="Left"
    :title="titles + '运行监测'"
  >
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <TopItem>
      </TopItem>
      <div class="bottom-title">{{titles + curBottomTitle + '环境监测'}}</div>
      <BottomItem @setItems="getBottomItems">
      </BottomItem>
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import TopItem from './TopItem.vue';
import BottomItem from './BottomItem.vue';
import { pumpMapList } from '../common/titles';
export default {
  components: {
    HerinContainer,
    TopItem,
    BottomItem
  },
  data() {
    return {
      pumpMapList: [],
      curBottomTitle: ''
    };
  },
  computed: {
    titles() {
      let title = '';
      const id = this.$route.params.id;
      if (this.pumpMapList && this.pumpMapList.length > 0) {
        title = this.pumpMapList.find((item) => id === item.id).value;
      }
      return title;
    }
  },
  mounted() {
    this.pumpMapList = pumpMapList;
  },
  methods: {
    getBottomItems(item) {
      this.curBottomTitle = item.title;
    }
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box {
  &-content {
    .bottom-title {
      color: #F8F8F8;
      font-size: 1rem;
      margin: 1.25rem 0 .9375rem;
    }
  }
}
</style>
